<!DOCTYPE html>
<html>
  <head>
    <title>Custom Event Test</title>
        <script src="jquery.js"></script>
        <script src="jquery-ui.min.js"></script>
        <script>
          $(document).ready(function() {
            $('.lightbulb').bind('changeState', function(e) {    
              var $light = $(this);    
              if ($light.hasClass('on')) {        
                $light.removeClass('on').addClass('off'); 
                $light.text( 'off' );  
              } else {       
               $light.removeClass('off').addClass('on');
               $light.text( 'on' );   
             } 
            });
            
            $('.switch, .clapper').click(function() {
              $('.lightbulb').trigger( 'changeState' ); 
            });
          });  
        </script>
  </head>
  <body>
    <div class="room" id="kitchen">    
      <div class="lightbulb on">on</div>    
      <a href="javascript:;" class="switch">switch</a>    
      <a href="javascript:;" class="clapper">clapper</a> 
    </div>

  </body>
</html>